<template>
  <div class="app-container">


<!-- 
    <div class="filter-container">
      <el-input
      :disabled="userState"
        v-model="queryForm.cardNo"
        placeholder="卡号"
        style="width: 200px"
        class="filter-item"
        @keyup.enter.native="queryBtn"
      />
      <el-button
      :disabled="userState"
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        style="margin-left: 5px"
        @click="queryBtn"
      >
        查询
      </el-button>
  </div> -->


    <el-table
      :header-cell-style="{ background: '#ffffff', color: '#000000' }"
      :key="tableKey"
      :row-class-name="tableRowClassName"
      v-loading="listLoading"
      :data="list"
      :row-key="'cardNo'"
      :stripe=true
      ref="ebCardTable"
      @selection-change="handleTableChange"
      border
      fit
      highlight-current-row
      style="
        width: 100%;
        font-size: 15px;
        box-shadow: 1px 1px 8px #cdcdcd;
        border: 0px;
      "
      :default-sort="{ prop: 'time', order: 'descending' }"
    >
      <el-table-column label="卡号" min-width="200px">
        <template slot-scope="scope">
          <span>{{ scope.row.cardNo }}</span>
        </template>
      </el-table-column>

      <el-table-column label="充值金额" min-width="220px">
        <template slot-scope="scope">
          <span>{{ scope.row.depositAmount }}</span>
        </template>
      </el-table-column>
 

      <el-table-column label="充值时间" min-width="100px">
        <template slot-scope="scope">
          <span>{{ scope.row.createDate }}</span>
        </template>
      </el-table-column>


    </el-table>

    <el-row>
      <el-col :span="24" class="page-tool">
        <el-pagination
          layout="total,sizes,prev, pager,next,jumper"
          style="margin-top: 10px"
          :page-size="pageSize"
          :total="total"
          :page-sizes="[10, 20, 30, 40]"
          @size-change="handlePageChange"
          @current-change="handleNoChange"
        ></el-pagination>
      </el-col>
    </el-row>


  </div>
</template>

<style>

.page-tool {
  background: rgb(237, 231, 231);
}

.page-tool div {
  text-align: right;
}

.lock-btn {
  margin-bottom: 5px;
  margin-top: -10px;
}
.operateBtn {
  font-size: 18px;
  width: 32px;
  height: 32px;
  padding: 0;
}

.el-table .warning-row {
  background: #fff5ee;
}
.el-table__body tr:hover > td {
  background-color: #fdc091;
}
.el-table__body tr.current-row > td {
  background-color: #fdc091;
}
</style>


<script>

import waves from "@/directive/waves"; // waves directive
import { loadDetailApi} from "@/api/bike";
import {} from "../../utils/auth";

import { parseTime } from "@/utils";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination



export default {



name: "ebCard",
  data: function () {
    return {
      clientHeight:
        Math.max(
          document.documentElement.scrollHeight,
          document.body.scrollHeight
        ) -
        132 -
        5 +
        10 -
        28,
      loading: false,

      list: [],
      pageNo: 1,
      pageSize: 20,
      total: 0,
      listLoading: true,
      queryForm:{
        cardNo:''
      },

      pageNo: 1,
      pageSize: 20,
      total: 0,
      labelWidth2:"100px",
      multipleSelection: [],
      rechargerDialog: false,
      labelWidth: "100px",
      selected: "",
      tableKey: 0,
      addDialog: false,
      labelWidth: "120px",
      form: {},

      roleIndex: true,
      total: 0,
      loading: false,
      total: 0,     
      labelWidth: "150px",
      currentPage: 1,
      pageSizes: [10, 20, 40],
      listLoading: true,
      listQuery: {
        pageNo: 1,
        pageSize: 41,
        name: undefined,
        phone: undefined,
        number: undefined,
        sort: "+id",
      },


     

    };
  },



  mounted: function () {
     this.$nextTick(function () {
      let _this = this;
      _this.loadDetail(_this.pageNo, _this.pageSize);
    });
  },

  computed: {
    userState () {
      return getNickName() === getTestUserName();
    }
  },
  

  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return "warning-row";
      }
      return "";
    },

    

 
    handleFilter() {
      this.listQuery.pageNo = 1;
   //   this.getList();
    },
    handleModifyStatus(row, status) {
      this.$message({
        message: "操作Success",
        type: "success",
      });
      row.status = status;
    },

    //列表页码的触发事件
    handlePageChange(pageSize) {
      this.pageSize = pageSize;
      this.loadDetail(pageNo, pageSize);
    },
    handleNoChange(pageNo) {
      this.pageNo = pageNo;
      this.loadDetail(pageNo, pageSize);
    },
    handleTableChange(val) {
      this.multipleSelection = val;
    },
    loadDetail (pageNo, pageSize) {
      let _this = this;
      _this.loading = true;
      loadDetailApi({pageNo: pageNo,
        pageSize: pageSize,
        cardNo:_this.queryForm.cardNo,
        roleCode:this.$store.state.mainpart.key
      
      }).then(resp => {
        if (resp.errmsg === "ok") {
            _this.total = resp.data.totalNum;
            _this.list = resp.data.dataList;
  
          }
          
         setTimeout(() => {
          _this.listLoading = false;
        }, 1 * 1000);
      })
      .catch(function (e) {
          console.log(e);
      });
    },

    queryBtn () {
      let _this = this
      _this.loading = true
      _this.loadDetail (_this.pageNo, _this.pageSize, _this.queryForm)
    },







  }
}

</script>